<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>王者荣耀英雄展示</title>
    <style>
#box {
  width: 100%;
  display: flex;
  justify-content: center; /* Center the accordion items horizontally */
  overflow-x: auto; /* Enable horizontal scrolling if needed */
}

.accordion {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
}

.accordion li {
  margin-right: 10px;
  position: relative;
}

.accordion li:last-child {
  margin-right: 0;
}

.accordion li a {
  display: block;
  text-decoration: none;
  color: black;
}

.accordion li .small {
  width: 100px; /* Adjust as needed */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition */
}

.accordion li .big {
  width: 200px; /* Adjust as needed */
  height: auto;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10; /* Ensure it appears above other elements */
}


    </style>
    <script src="/static/js/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="box">
        <ui class="accordion">
            <li>
                <a href="">
                    <img src="/static/images/WZimgs/狂铁.jpg" alt="" class="small">
                    <img src="/static/images/WZimgs/狂铁1.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="/static/images/WZimgs/嫦娥.jpg" alt="" class="small">
                    <img src="/static/images/WZimgs/嫦娥1.jpg" alt="" class="big">
                </a>
            </li>
            <li> 
                <a href="">
                    <img src="/static/images/WZimgs/阿古朵.jpg" alt="" class="small">
                    <img src="/static/images/WZimgs/阿古朵1.jpg" alt="" class="big">
                </a></li>
            <li>
                <a href="">
                    <img src="/static/images/WZimgs/西施.jpg" alt="" class="small">
                    <img src="/static/images/WZimgs/西施1.jpg" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="/static/images/WZimgs/孙策.jpg" alt="" class="small">
                    <img src="/static/images/WZimgs/孙策1.jpg" alt="" class="big">
                </a>
            </li>
        </ui>
    </div>
    <script>
        $('#box li').mouseenter(function(){
            $(this).stop().animate({
                width:224
            }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
            $(this).siblings('li').stop().animate({
                width:69
            }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut()
        })
    </script>
</body>

</html>